<template>
  <div class="page_main">
    <div class="search_box">
      <el-form ref="searchForm" :inline="true" :model="searchForm" size="mini">
        <search-form-box>
          <template slot="showSearch">
            <el-form-item label="标题" prop="title">
              <el-input v-model="searchForm.title" clearable placeholder="请输入标题">
              </el-input>
            </el-form-item>
          </template>
          <template slot="searchBtn">
            <el-form-item>
              <el-button type="primary" plain @click="search">搜索</el-button>
              <el-button type="info" plain @click="resetForm('searchForm')">重置</el-button>
            </el-form-item>
          </template>
        </search-form-box>
      </el-form>
    </div>
    <el-button type="primary" size="mini" @click="customerLevelDialogVisible = true">新建客户等级</el-button>

    <div class="data_box">
      <el-table v-loading="tableLoading" :data="tableData" size="mini" stripe border ref="table" :max-height="tableMaxHeight">
        <el-table-column label="序号" fixed="left" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ (listParams.page - 1) * listParams.page_size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title" fixed="left" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column label="最小预算" prop="min_budget" width="200" align="center">
        </el-table-column>
        <el-table-column label="最大预算" prop="max_budget" width="200" align="center">
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200" align="center">
          <template slot-scope="scope">
            <el-button-group>
              <el-button type="primary" size="mini" @click="edit(scope.row)">编辑
              </el-button>
              <el-button type="danger" size="mini" @click="del(scope.row)">删除
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="searchForm.page"
      :page-sizes="[10,20,50,100, 200, 400]"
      :page-size.sync="searchForm.page_size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog :title="dialogEdit?'修改客户等级':'新增客户等级'" :visible.sync="customerLevelDialogVisible" width="50%" center
               @close="closeDialog"
    >
      <el-form ref="customerLevelsForm" :model="customerLevelsData" size="mini"
               label-width="100px" :rules="customerLevelFormRules">
        <el-card shadow="always">
          <el-row>
            <el-col :span="24">
              <el-form-item label="标题">
                <el-input v-model="customerLevelsData.title" placeholder="请输入标题"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="最小预算">
                <el-input autosize v-model="customerLevelsData.min_budget" type="number" placeholder="请输入最小预算"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="最大预算">
                <el-input autosize v-model="customerLevelsData.max_budget" type="number" placeholder="请输入最大预算"></el-input>
              </el-form-item>
            </el-col>

          </el-row>
        </el-card>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="customerLevelDialogVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SearchFormBox from '@/components/SearchFormBox'
import { list, save, remove } from '@/api/customerLevel'
import {Message} from "element-ui";

export default {
  name: 'customerLevelList',
  components: {
    SearchFormBox
  },
  data() {
    return {
      dialogEdit: false,
      tableMaxHeight: 0,
      searchForm: {
        page: 1,
        page_size: 10,
        name: null
      },
      listParams: {
        page: 1,
        page_size: 10
      },
      total: 0,
      tableData: [],
      tableLoading: false,
      customerLevelDialogVisible: false,
      customerLevelsData: {},
      customerLevelFormRules: {
        title: [
          { required: true, message: '请填写标题', trigger: 'change' }
        ],
        min_budget: [
          { required: true, message: '请填写最小预算', trigger: 'change' }
        ],
        max_budget: [
          { required: true, message: '请填写最大预算', trigger: 'change' }
        ]
      },
    }
  },
  created() {
    this.tableMaxHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 210
    this.getList()
  },
  methods: {
    search() {
      this.searchForm.page = 1
      this.listParams = Object.assign({}, this.searchForm)
      this.getList()
    },
    getList() {
      this.tableLoading = true
      list(this.listParams).then(res => {
        this.tableLoading = false
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.listParams = Object.assign({}, this.searchForm)
      this.getList()
    },
    handleSizeChange(val) {
      this.listParams.page_size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listParams.page = val
      this.getList()
    },
    edit(row){
      this.dialogEdit = true
      this.customerLevelsData = Object.assign({},row)
      this.customerLevelDialogVisible = true
    },
    del(row){
      this.$confirm('确认要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
          remove({id:row.id}).then(res => {
            this.$message.success(res.message)
            this.getList()
          })
        }).catch()
    },
    save(){
      this.$refs.customerLevelsForm.validate(flag => {
        if (flag) {
          const loading = this.$loading({
            lock: true,
            text: '保存中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          save(this.customerLevelsData).then(res => {
            loading.close()
            this.$message.success('保存成功')
            this.closeDialog()
            this.getList()
          }).catch(() => {
            loading.close()
          })
        }
      })
    },
    closeDialog() {
      this.dialogEdit = false
      this.customerLevelsData = {
        title: null,
        min_budget: null,
        max_budget: null
      }
      this.$nextTick(() => {
        this.$refs.customerLevelsForm.clearValidate()
      })
      this.customerLevelDialogVisible = false
    },
    // 关闭此页面
    closeThisPage() {
      this.$store.dispatch('tagsView/closePage', this.$route.name)
    }
  }
}
</script>

<style scoped lang="scss">
.page_main {
  margin-top: 20px;
  padding: 0 20px;
}

.data_box {
  margin-top: 10px;
}

/* 禁用全选 */
/deep/ .el-table__fixed-header-wrapper .el-table-column--selection {
  text-indent: -999999px;
}
</style>
